<template>
  <div>
    <div class="firstimg" v-show="isLogin">
      <img src="../assets/page/reg.png" alt />
      <div class="login">
        <div class="loginstyle">
          <span>账号登陆</span>
          <span>|</span>
          <span>扫码登陆</span>
        </div>
        <!--
          value="{{user.name}}"
          value="{{user.pwd}}"
        -->
        <input type="text" placeholder="用户名" v-model="user.name" class="input1 name" />
        <a class="forget">忘记用户名?</a>
        <input type="password" placeholder="密码" v-model="user.pwd" class="input1 pwd" />
        <a class="forget">忘记密码?</a>
        <button class="button enroll" @click="login()">登录</button>
        <button class="button" @click="switchRegistry()">立即注册</button>
      </div>
    </div>
    <div class="reg" v-show="!isLogin">
      <div class="toptitle">
        <div>
          <!-- <img src="../assets/logo.png" alt style="padding-left: 20%;" /> -->
        </div>
        <span>注册账号</span>
      </div>
      <div class="regcontent">
        <div>
          <ul class='form-row'>
            <li>会员用户名：</li>
            <li>
              <input
                v-model="regInfo.customer.supplier"
                class="input1"
                type="text"
                placeholder="请设置4-15位字母/数字组合"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>密码：</li>
            <li>
              <input
                v-model="regInfo.customer.accountNumber"
                class="input1"
                type="password"
                placeholder="请设置6-20位字母/数字+符号组合"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>确认密码：</li>
            <li>
              <input
                v-model="regInfo.customer.accountNumber2"
                class="input1"
                type="password"
                placeholder="请再次输入密码"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>性别：</li>
            <li>
              <div class="radio-box">
              <label style="font-size: 14px;color: #c9990c;"><input  v-model="regInfo.customer.sex" type="radio" value="男" />男</label>
              <label style="font-size: 14px;color: #c9990c;"><input  v-model="regInfo.customer.sex" type="radio" value="女" />女</label>
              </div>
            </li>
          </ul>
          <ul class='form-row'>
            <li>职业：</li>
            <li>
              <input
                v-model="regInfo.customer.contacts"
                class="input1"
                type="text"
                placeholder="请输入职业"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>出生年：</li>
            <li>
              <input
                v-model="regInfo.customer.brth"
                class="input1"
                type="text"
                placeholder="如 1995"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>身高（cm）：</li>
            <li>
              <input
                v-model="regInfo.customer.advanceIn"
                class="input1"
                type="text"
                placeholder="如 165"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>体重（kg）：</li>
            <li>
              <input
                v-model="regInfo.customer.allNeedGet"
                class="input1"
                type="text"
                placeholder="如 60"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>手机号码：</li>
            <li>
              <input
                v-model="regInfo.customer.phonenum"
                class="input1"
                type="text"
                placeholder="请输入手机号"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>邮寄地址：</li>
            <li>
              <input
                v-model="regInfo.customer.address"
                class="input1"
                type="text"
                placeholder="请输入邮寄地址"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>邮箱：</li>
            <li>
              <input
                v-model="regInfo.customer.email"
                class="input1"
                type="text"
                placeholder="请输入邮箱"
              />
            </li>
          </ul>
          <ul class='form-row'>
            <li>身体健康状况：</li>
            <li>
            <!--
              <input
                v-model="regInfo.customer.description"
                class="input1"
                type="text"
                placeholder="请输入身体健康状况"
              />
            -->
              <select class="sele1" v-model="regInfo.customer.description">
                <option value="良好">良好</option>
                <option value="有基础疾病">有基础疾病</option>
              </select>
            </li>
          </ul>
          <ul class="lastul form-row">
            <li>验证码：</li>
            <li>
              <input
                v-model="regInfo.verifyCode"
                class="input1 input2"
                type="text"
                placeholder="请输入图中结果"
              />
            </li>
            <li>
              &nbsp;&nbsp;
              <img :src="verifyCodeUrl" style="width: 80px;" @click="resetVerifyCode()" />
            </li>
            <li>
              <a href="javascript:;" @click="resetVerifyCode()">看不清，换一张</a>
            </li>
          </ul>
          <div class="confirm">
            <label for="checkbox">
              <input
                type="checkbox"
                :checked="checkedAgree"
                @change="toggleAgree()"
                name="checkbox"
              />
            </label>
            <span>
              &nbsp;&nbsp;您确认阅读并接收
              <a
                href="javascript:;"
                @click="popUpAgreement()"
                class="agreement"
              >《曲姣用户服务协议》</a>
            </span>
          </div>

          <button class="freereg" @click="regDataPost()">免费注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { registry } from "@/api/login";

export default {
  data() {
    return {
      isLogin: true,
      user: {
        name: "",
        pwd: ""
      },
      verifyCodeUrl: "http://erp.bjqujiao.com/captcha",
      checkedAgree: false,
      regInfo: {
        verifyCode: "",
        customer: {
          supplier: "",
          accountNumber: "",
          accountNumber2: "",
          sex: "女",
          contacts: "",
          brth: "",
          advanceIn: "",
          allNeedGet: "",
          phonenum: "",
          address: "",
          email: "",
          description: "良好"
        }
      },
      agreeContent: `
在注册前，敬请您阅读以下内容，在进行注册程序过程中点击“同意”按钮即表示用户完全接受本协议项下的全部条款。
第一条　会员资格

在您承诺完全同意本服务条款并在曲姣微信订阅号完成注册程序后，即可成为本网站会员，享受曲姣网站为您提供的服务。
第二条　会员权限

1．会员免费注册后才能享有本网站提供的服务；

2．任何会员均有义务遵守本规定及其它网络服务的协议、规定、程序及惯例。
第三条　会员资料

1．为了使我们能够更好地为会员提供服务，请您提供详尽准确的个人资料，如更改请及时更新，提供虚假资料所造成的后果由会员承担；

2．会员有责任保管好自己的注册密码并定期修改避免造成损失，由于会员疏忽所造成的损失由会员承担。用户应当对以其用户帐号进行的所有活动和事件负法律责任。
第四条　会员资格的取消

如发现任何会员有以下故意行为之一，本网保留取消其使用服务的权利，并无需做出任何补偿；

1．可能造成本网站全部或局部的服务受影响，或危害本网站运行；

2．以任何欺诈行为获得会员资格；

3．在本网站内从事非法商业行为，发布涉及敏感政治、宗教、色情或其它违反有关国家法律和政府法规的文字、图片等信息；

4．以任何非法目的而使用网络服务系统。
第五条　服务商的权利

1．有权审核、接受或拒绝会员的入会申请，有权撤销或停止会员的全部或部分服务内容；

2．有权修订会员的权利和义务，有权修改或调整本网站的服务内容；

3．有权将修订的会员的权利和义务以e-mail形式通知会员，会员收到通知后仍继续使用本网站服务者即表示会员同意并遵守新修订内容。

4．本网提供的服务仅供会员独立使用，未经本网授权，会员不得将会员号授予或转移给第三方。会员如果有违此例，本网有权向客户追索商业损失并保留追究法律责任的权利。
第六条　服务商的义务

1．认真做好本网站所涉及的网络及通信系统的技术维护工作，保证本网站的畅通和高效；

2．除不可抗拒的因素导致本网站临时停止或短时间停止服务以外，乙方如需停止本网站的全部或部分服务时，须提前在本网站上发布通知通告会员。


3．因不可抗力而使本网站服务暂停，所导致会员任何实际或潜在的损失，本网不做任何补偿；

4．本网不承担会员因遗失密码而受到的一切损失。


第七条　附则

1．以上规定的范围仅限于曲姣网站及微信订阅号；

2．会员因违反以上规定而触犯有关法律法规，一切后果自负，曲姣网站及曲姣微信订阅号不承担任何责任；

3．本规则未涉及之问题参见有关法律法规，当本规定与有关法律法规冲突时，以相应的法律法规为准。在本条款规定范围内，曲姣网站及微信订阅号拥有最终解释权。`
    };
  },
  created() {
    // this.postRegisterData();
    this.regInfoClone = this.regInfo;
  },
  methods: {
    login() {
      console.log(this.user);
      // this.isLogin = true;
    },
    switchRegistry() {
      console.log("switchRegistry");
      const regData = {
        supplier: "姓名",
        accountNumber: "用户名",
        type: "性别",
        contacts: "职业",
        brth: "出生年",
        advanceIn: "身高",
        allNeedGet: "体重",
        phonenum: "手机号",
        address: "邮寄地址",
        email: "邮箱",
        description: "身体健康状况"
      };
      this.isLogin = false;
      window.scrollTo(0, 0);
    },
    resetVerifyCode() {
      // this.verifyCodeUrl = 'http://erp.bjqujiao.com/captcha'
      this.verifyCodeUrl = this.verifyCodeUrl + `?timeStamp=${Date.now()}`;
    },
    toggleAgree() {
      this.checkedAgree = !this.checkedAgree;
      console.log(arguments, this.checkedAgree);
    },
    popUpAgreement() {
      document.body.style.overflow = 'hidden';

      this.$alert("用户协议", {
        title: '会员注册协议',
        message: `<pre>${this.agreeContent}</pre>`,
        dangerouslyUseHTMLString: true,
        customClass: "pop-agreement",
        confirmButtonText: "确定",
        lockScroll: false,
        center: true,
        callback: action => {
          console.log(action);
          document.body.style.overflow = '';
        }
      });
    },
    regDataPost() {
      this.postRegisterData();
    },
    postRegisterData() {
      console.log(this.checkedAgree);
      if (Object.values(this.regInfo.customer).some(m => !m)) {
        this.$message.error("提交不能有空选项!");
        return;
      }
      if (!this.regInfo.verifyCode) {
        this.$message.error("验证码不能为空!");
        return;
      }
      if (!this.checkedAgree) {
        this.$message.error("请您确认阅读并接收 《曲姣用户服务协议》");
        return;
      }

      registry(JSON.stringify(this.regInfo))
        .then(response => {
          console.log(new Date(), response);
          if (response.code !== 200) {
            this.$message.error((response && response.msg) || "提交注册失败！");
            return;
          }
          // this.$message.success("注册成功！")
          this.$alert("注册成功！", {
            center: true
          }).then(res => {
            console.log(res);
            this.regInfo = this.regInfoClone;
            this.isLogin = true;
          });
        })
        .catch(err => {
          this.$message.error((err && err.msg) || "提交注册失败！");
        });
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
a {
  cursor: pointer;
}
.firstimg {
  height: 100%;
  position: relative;
  img {
    margin: 0 0 -4px 0px;
  }
  @media screen and (max-width: 420px) {
    img {
      height: 320px;
    }
  }
}

.login {
  position: absolute;
  // top: 85px;
  top: 50px;
  // right: 420px;
  right: 120px;
  background-color: #faf6e7;
  min-width: 450px;
  min-height: 470px;
  max-width: 450px;
  max-height: 470px;
  border-radius: 20px;
  // padding: 50px 50px;
  padding: 40px 50px 40px 40px;
  width: 100%;
  box-sizing: border-box;

  @media screen and (max-width: 740px) {
    border-radius: 0;
    right: 0; left: 0;
    top: 0;
    margin: auto;
    min-width: 320px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: lighten(#faf6e7, 3%);
    position: relative;

    .input1 {
      border: 0;
      border-bottom: 1px solid #c9990c;
      border-radius: 0;
      border-width: 1px;
      font-size: 16px;
      height: 40px;
    }
    .button {
      /* border-width: 1px; */
    }

    .loginstyle span {
      font-size: 22px;
    }
  }
}

.loginstyle {
  font-size: 24px;
  font-weight: bold;
  line-height: 24px;
  color: #c9990c;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  margin-bottom: 25px;
}

.loginstyle > span:nth-child(2) {
  display: block;
  padding: 0 20px;
  font-size: 30px;
  line-height: 20px;
  font-weight: 100;
}

.loginstyle > span:not(:nth-child(2)):hover {
  cursor: pointer;
}

.input1 {
  background-color: transparent;
  display: block;
  color: #c9990c;
  width: 100%;
  background-color: transparent;
  outline-style: none;
  box-shadow: none;
  border: 2px solid #d2ab35;
  height: 45px;
  border-radius: 5px;
  display: block;
  padding-left: 10px;
  font-size: 18px;
  transition: background 1s ease;
  &.name,
  &.pwd {
    &:focus {
      background: white;
    }
  }
}

.sele1 {
  background-color: transparent;
  display: block;
  width: 105%;
  background-color: transparent;
  outline-style: none;
  box-shadow: none;
  border: 2px solid #d2ab35;
  height: 45px;
  border-radius: 5px;
  display: block;
  padding-left: 10px;
  font-size: 14px;
  transition: background 1s ease;
  &.name,
  &.pwd {
    &:focus {
      background: white;
    }
  }
}

.radio-box{
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;
}

.radio {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.input-radio {
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 0px;
  outline: none;
  -webkit-appearance: none;
}

.forget {
  color: #c9990c;
  font-size: 12px;
  float: right;
  line-height: 40px;
}

.button {
  margin-top: 10px;
  display: block;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  text-decoration: none;
  color: #c9990c;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #d2ab35;
  background-color: #fff;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  &.enroll {
    margin-top: 70px;
  }
  &:hover {
    color: white;
    background: #c9990c;
  }
}

.toptitle {
  border-bottom: 2px solid #d2ab35;
  font-size: 26px;
  display: flex;
  margin: 0 20%;
}

.toptitle > span {
  display: block;
  line-height: 70px;
  padding-left: 5px;
}
.regcontent {
  padding-top: 60px;
}
.regcontent > div {
  width: 500px;
  margin: 0 auto 30px auto;
}

.regcontent > div > ul {
  display: flex;
  list-style-type: none;
  margin: 15px 0;
}
.regcontent > div > ul > li:first-child {
  min-width: 100px;
  text-align: right;
  line-height: 40px;
  font-size: 14px;
}
.regcontent > div > ul > li:last-child {
  width: 350px;
}
.regcontent > div > ul > li:last-child > input {
  height: 40px;
  font-size: 14px;
  text-align: center;
}
.input2 {
  width: 150px;
  height: 35px;
  font-size: 14px;
  text-align: center;
}
.lastul {
  line-height: 35px;
  font-size: 14px;
  margin-bottom: 0 !important;
}
.lastul > li:nth-child(3) {
  display: block;
  min-width: 100px;
}
.lastul a {
  text-decoration: none;
  white-space: nowrap;
}

.confirm {
  padding: 5px 0 0 20px;
  margin: 0;
  font-size: 12px;
  // line-height: 20px;
  color: gray;
  input {
    line-height: 20px;
    margin: 0px -3px 0px 0;
    display: inline-block;
    vertical-align: bottom;
  }
  span {
  }
}

.freereg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: bold;
  // margin: 0 auto;
  margin: 40px auto auto auto;
  display: block;
  width: 400px;
  background-color: #d2ab35;
  text-decoration: none;
  color: white;
  text-align: center;
  border-radius: 20px;
  border: none;
  outline: none;
  cursor: pointer;
}

@media screen and (max-width: 640px) {
  .toptitle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .regcontent {
    padding-top: 20px;
    > div {
      width: 100%;
    }
  }
  ul.form-row {
    /* flex-direction: column;
    justify-content: center;
    align-items: flex-start; */
    margin: 12px 0 !important;
    box-sizing: border-box;
    padding: 0 8px;
    li {
      display: flex;
    }
    li:first-child {
      justify-content: flex-end;
    }
    > li > input.input1 {
      border: none;
      border-bottom: 1px solid #d2ab35;
      border-radius: 0;
      text-align: left !important;
      box-sizing: border-box;
      width: 240px;
      width: 65vw;
    }
  }
  ul.lastul {
    li:nth-child(2) {
      width: 150px !important;
    }
    li:last-child {
      display: none;
    }
  }
  .confirm {
    display: flex;
    align-items: center;
    padding-left: 80px;
    margin-top: 16px;
  }
  .freereg {
    box-sizing: border-box;
    margin: 30px auto;
    width: 80%;
    display: block;
  }
}
</style>

<style lang="scss">
.pop-agreement {
  padding-bottom: 16px !important;
  width: 80%;
  max-width: 840px !important;

  .el-message-box__message {
    overflow-y: scroll;
    height: 60vh;
    box-sizing: border-box;
    pre {
      white-space: pre-wrap !important;
      text-align: left;
      margin: 0 auto;
      margin-top: 12px;
      box-sizing: border-box;
      padding: 5px;
    }
  }

  @media screen and (max-width: 460px) {
    width: 80% !important;
    .el-message-box__message {
      /* width: ; */
      box-sizing: border-box;
      > p {
        display: block;
        width: 100%;
      }

      pre {
        width: 100% !important;
      }
    }
    .el-message-box__content {
      padding: 0 12px;
    }
  }
}
</style>
